<!--  -->
<template>
  <div class="videoBrickRowBox">
    <div class="videoBrickHeader">
      <h3>视频</h3>
      <a href="#"
        ><span>查看全部</span
        ><span class="iconfont icon-youjiantou-tianchong"></span
      ></a>
    </div>
    <div class="videoBrickBody">
      <video-item class="videoBoxItem">
        <img
          src="@/assets/img/picture/videoImg1.jpg"
          alt=""
          slot="videoImg"
          class="videoImg"
        />
        <span slot="videoDesc1" class="videoDesc1">Redmi 10X系列发布会</span>
      </video-item>
      <video-item class="videoBoxItem">
        <img
          src="@/assets/img/picture/videoImg2.jpg"
          alt=""
          slot="videoImg"
          class="videoImg"
        />
        <span slot="videoDesc1" class="videoDesc1">小米10 青春版 发布会</span>
      </video-item>
      <video-item class="videoBoxItem">
        <img
          src="@/assets/img/picture/videoImg3.jpg"
          alt=""
          slot="videoImg"
          class="videoImg"
        />
        <span slot="videoDesc1" class="videoDesc1">小米10 8K手机拍大片</span>
      </video-item>
      <video-item class="videoBoxItem">
        <img
          src="@/assets/img/picture/videoImg4.jpg"
          alt=""
          slot="videoImg"
          class="videoImg"
        />
        <span slot="videoDesc1" class="videoDesc1">小米10发布会</span>
      </video-item>
    </div>
  </div>
</template>

<script>
import videoItem from "@/components/body/video-item";
export default {
  data() {
    return {};
  },
  components: {
    videoItem,
  },
};
</script>

<style lang='less' >
.videoBrickRowBox {
  margin: 20px auto;
  width: 1226px;
  height: 357px;
  .videoBrickHeader {
    width: 100%;
    height: 58px;
    line-height: 58px;
    h3 {
      float: left;
      font-size: 22px;
    }
    a {
      float: right;
      height: 58px;
      span {
        margin: 0 3px;
      }
    }
  }
  .videoBrickBody {
    .videoBoxItem {
        float: left;
      background-color: #fff;
      position: relative;
      transition: all 0.3s;
      margin-right: 14px;
      &:last-child{
          margin-right: 0;
      }
      .videoImg {
        width: 296px;
        height: 180px;
      }
      .videoDesc1 {
        display: block;
        margin: 0 14px 6px;
        margin-top: 20px;
        font-size: 14px;
        font-weight: 400;
        width: 286px;
        height: 12px;
        text-align: center;
      }
      &:hover {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        transform: scale(1.008);
      }
    }
  }
}
</style>
